<!-- 订单管理页面 -->
<template>
    <div>
        <el-row>
            <el-col :span="4">
                <el-button type="primary" class="el-icon-arrow-left" @click="goHome">返回上一级</el-button>
            </el-col>
        </el-row>
        <hr />

        <div class="commodity" v-if="dinList.length > 0">
            <el-table ref="multipleTable" :data="dinList" tooltip-effect="dark" style="width: 100%">
                <el-table-column prop="s_name" label="表演人" width="220">
                </el-table-column>
                <el-table-column prop="s_price" label="价格" width="150">
                </el-table-column>
                <el-table-column prop="s_num" label="数量">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDelete(scope.$index, scope.row)"
                            slot="reference">取消预约</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <h2 v-else class="noCommodity">你还没有添加的订单，去 <a class="goHome" @click="goHome">首页</a> 逛逛吧</h2>
    </div>
</template>

<script>
import qs from 'qs';
export default {
    data() {
        return {
            // 用户订单列表
            dinList: [{
                s_name: "",
                s_price: "",
                s_num: "",
            }],
        }
    },
    methods: {
        // 返回上一级按钮功能
        goHome() {
            this.$router.push("/home")
        },

        // 获取用户订单
        getDinList() {
            this.dinList = this.$store.state.userDin;
        },

        // 全选 按钮功能
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 取消预约按钮功能
        async handleDelete(index, row) {
            this.dinList.splice(index, 1)
            let res = await this.$http({
                method: "GET",
                url: `http://10.3.136.136:8888/deleteOrder?username=${this.$store.state.user.username}&s_name=${row.s_name}`,
            })
            if (res.status.code == 200) {
                this.$message({
                    message: "已取消预约",
                    type: 'success'
                });
                this.$store.commit('CHANGEDIN', row.s_name)
                return
            } else {
                this.$message.error('操作失败');
            }
        },
        goHome() {
            this.$router.push("/home")
        }
    },
    mounted() {
        this.getDinList()
    }
}
</script>

<style lang="scss" scoped>
.el-icon-arrow-left {
    margin: 15px;
}

.selection-bar {

    // padding: 1vw 0;
    .selection-box {
        margin: 0 50px;
    }
}

.commodity {
    padding: 2vw;
    padding-top: 1vw;
    // height: 90px;

    // display: flex;
    // flex-direction: row;
    // align-items: flex-start;
    .commodity-information {
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .commodity-operation {
        height: 90px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.allAppointment {
    position: absolute;
    bottom: 10%;
    right: 20%;
}

.noCommodity {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

.goHome {
    color: #0000FF;
}

.goHome:hover {
    color: hotpink;
}
</style>
</style>